<template>
  <div>
    <!-- 整体 -->
    <div class="box" v-for="item in listArr" :key="item.id">
      <!-- 图片 -->
      <div class="top">
        <img v-lazy="item.scene_pic_url" alt="" />
      </div>
      <!-- 标题信息 -->
      <div class="centerTop">
        <p>
          {{ item.title }}
        </p>
      </div>
      <!-- 推销信息 -->
      <div class="centerFooter">
        <p>
          {{ item.subtitle }}
        </p>
      </div>
      <!-- 价格 -->
      <div class="footer">
        <p>{{ item.price_info | RMBformat }}起</p>
      </div>
    </div>
    <div class="box2">
      <div>
        <van-pagination
          v-model="currentPage"
          :page-count="2"
          mode="simple"
          @change="onchange"
        />
      </div>
    </div>
  </div>
</template>

<script>
// 导入专题数据函数
import { GetTopic } from "../https/http";
export default {
  name: "Topic",
  data() {
    return {
      listArr: [],
      currentPage: 1,
    };
  },
  methods: {
    onchange() {
      console.log(this.scrollToTop);
      this.fn();
      document.documentElement.scrollTop = 0;
    },
    fn() {
      GetTopic({ page: 1, size: 10 }).then(
        (res) => {
          console.log(res);
          this.listArr = res.data.data;
        },
        (err) => {
          console.log(err);
        }
      );
    },
  },
  created() {
    this.fn();
  },
};
</script>

<style scoped lang="less">
.box {
  width: 100%;
  height: 350px;
  margin-bottom: 0px;

  .top {
    height: 208px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .centerTop {
    margin: 15px 0px;
    margin-top: 30px;
    height: 24px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
  }
  .centerFooter {
    height: 24px;
    margin: 15px 0px;
    text-align: center;
    font-size: 14px;
  }
  .footer {
    height: 24px;
    margin: 15px 0px;
    text-align: center;
    color: red;
    font-size: 14px;
  }
}
.box2 {
  height: 100px;
  // background: fuchsia;
  position: relative;
  div {
    width: 70%;
    height: 40px;
    // background: peru;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-80%) translateX(-50%);
    a {
      display: block;
      height: 40px;
      width: 48%;
      color: initial;
      float: left;
      // background: lawngreen;
      text-align: center;
      line-height: 40px;
      border: 1px solid #ebedf0;
    }
  }
}
/deep/.van-pagination__page-desc {
  display: none;
}
</style>